/**
* activityForm 活动信息展览模板
**/ 

<template>
    <div>
        <el-form  label-width="100px" :model="bannerDetail" class="form">
            <el-form-item label="名称">
              <el-input v-model=" bannerDetail.name"></el-input>
            </el-form-item>
            <el-form-item label="活动人数">
              <el-input v-model=" bannerDetail.capacity"></el-input>
            </el-form-item>
            <el-form-item label="活动地点">
              <el-input v-model="bannerDetail.locate_name"></el-input>
            </el-form-item>
            <el-form-item label="详细地点">
                <el-input v-model="bannerDetail.locate"></el-input>
            </el-form-item>
            <el-radio-group v-model="bannerDetail.charge" @change="justShow">
            <el-form-item label="活动收费" >
              <el-radio v-model="bannerDetail.charge" label="免费">免费</el-radio>
              <el-radio v-model="bannerDetail.charge" label="收费">收费</el-radio>
              <el-radio v-model="bannerDetail.charge" label="仅展示" >仅展示</el-radio>
            </el-form-item>
            <el-form-item label="活动须知">
              <el-input v-model="bannerDetail.notes_for_application"></el-input>
          </el-form-item>
          <el-form-item label="活动须知">
            <el-input v-model="bannerDetail.off_return" type="textarea"></el-input>
          </el-form-item>
          </el-radio-group>
            <el-form-item label="活动价格" >
                <el-input v-model="bannerDetail.charge_detail" :disabled="chargeDetail"></el-input>
            </el-form-item>
            <el-form-item label="用户token" >
              <el-input v-model="token"></el-input>
          </el-form-item>
            <el-form-item label="活动图片地址">
              <el-input v-model="bannerDetail.image"></el-input>
          </el-form-item>
            <el-form-item label="报名时间"> 
              <el-col :span="11" >
                <el-date-picker type="date" placeholder="选择日期" v-model="bannerDetail.apply_begin_time" style="width: 90%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
              </el-col>
              <el-col class="line" :span="1">-</el-col>
              <el-col :span="11">
                  <el-date-picker type="date" placeholder="选择日期" v-model="bannerDetail.apply_end_time" style="width: 90%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item label="活动时间">
                <el-col :span="11">
                  <el-date-picker type="date" placeholder="选择日期" v-model="bannerDetail.begin_time" style="width: 90%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                </el-col>
                <el-col class="line" :span="1">-</el-col>
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="bannerDetail.end_time" style="width: 90%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                  </el-col>
              </el-form-item>
        </el-form>
        <markdown @change="change" class="markdown"></markdown>
    </div>
</template>
<script>
import markdown from "/markdown"
// 导出模块
export default {
  // 模块名字
  name: "activityForm",
  // 模块数据
  data() {
    //数据  
    return {
        bannerDetail:{
          name:"",
          capacity:10,
          locate:"",
          locate_name:"",
          apply_begin_time:"",
          apply_end_time:"",
          begin_time:"",
          end_time:"",
          introduction:"",
          originator:"",
          charge:"",
          charge_detail:"",
          need_apply:true,
          auto_return:null,
          finished:1,
          introduction:"",
          tags:[],
          image:"",
          off_return:"感谢您的报名申请，活动参与信息见活动详情页，活动前请通过微信或者电话与我先行联系"
      },
    };
  },
  // 注册组件
  components: {
      markdown
  },
  // 监听指定值，只有指定值变化，才会触发
  watch: {},
  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {
    //获得初始数据

    //markdown组件向父组件传送内部信息
    change(val) {
      this.bannerDetail.introduction = val
    },
    getdata(){

    },
  },
  // 创建前状态(里面是操作)
  beforeCreate() {},
  // 创建完毕状态(里面是操作)
  created() {
      this.getdata()
  },
  // 挂载前状态(里面是操作)
  beforeMount() {},
  // 挂载结束状态(里面是操作)
  mounted() {},
  // 更新前状态(里面是操作)
  beforeUpdate() {},
  // 更新完成状态(里面是操作)
  updated() {},
  // 销毁前状态(里面是操作)
  beforeDestroy() {},
  // 销毁完成状态(里面是操作)
  destroyed() {}
};
</script>
// scoped 样式只在本组件使用
<style scoped>
/**
 * 导入css样式组件
 * @import "../assets/css/components/index.css";
 */
</style>
